<template>
  <div class="loginForm">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 12 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: '请输入用户名!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '密码不为空!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 12 }">
        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 6, span: 12 }">
        <a-button type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { reactive, ref } from 'vue'
import { login } from '../../api/login'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { rsaEncrypt, rsaDecrypt } from '@/utils/rsa'
import { notification } from 'ant-design-vue'
export default {
  setup() {
    const formState = reactive({
      username: '',
      password: '',
      remember: false,
    })
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const rememberNew = ref()

    const userInfos = store.state.userInfos
    if (+localStorage.getItem('_isRem') === 1 && userInfos) {
      formState.username = userInfos.username
      formState.password = userInfos.password
        ? rsaDecrypt(userInfos.password)
        : '' // 解密
      formState.remember = true
    }

    console.log(userInfos, localStorage.getItem('_isRem'))

    const onFinish = (values) => {
      if (formState.remember) {
        localStorage.setItem('_isRem', 1)
      }
      if (userInfos?.password === formState.password) {
        rememberNew.value = formState.password
      } else {
        rememberNew.value = rsaEncrypt(formState.password) // 加密
      }
      login(formState).then((res) => {
        store.commit('changeUser', res.data)
        console.log(res.data)
        if (formState.remember) {
          // 记住密码
          const rememberUserInfos = {
            username: formState.username,
            password: rememberNew.value,
          }
          store.commit('rememberPwd', rememberUserInfos)
        } else {
          store.commit('rememberPwd', {})
        }
        router.push(route.query?.redirect ?? '/content') // ??代表左侧为null或undefined时 执行右边
        openNotificationWithIcon('success', 'bottomRight')
      })
    }
    const openNotificationWithIcon = (type, placement) => {
      notification[type]({
        message: '登录成功',
        // icon: () => h(SmileOutlined, { // 自定义图标
        //   style: 'color: #108ee9'
        // }),
        duration: 1.5,
        placement, // 出现的位置
      })
    }
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }
    return {
      formState,
      onFinish,
      onFinishFailed,
      userInfos,
      rememberNew,
      openNotificationWithIcon,
    }
  },
}
// export default {
//   data () {
//     return {
//       formState: {
//         username: '',
//         password: '',
//         remember: true
//       }
//     }
//   },
//   methods(){
//     onFinish (values) {
//       console.log(values);
//     }
//   }
// }
</script>
<style scoped></style>
